<template>
  <div class="">
    <button @click="num++">数量num+</button>
    <button @click="num2++">数量num2+</button>
    <h1>{{ num }}</h1>
    <h1>{{ num2 }}</h1>
  </div>
</template>

<script>
import { ref, reactive, toRefs, watch, watchEffect } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      num: 10,
    });
    const num2 = ref(20);

    // watch(
    //   () => {
    //     return data.num;
    //   },
    //   (newval, oldval) => {
    //     console.log(newval);
    //   },
    //   {
    //     immediate: false, //进入页面立刻监听
    //     deep: true, //深度监听
    //   }
    // );
    //watch  监听方法有三个参数 第一个 如果监听reactive就返回要监听的数据 第二个参数就是执行函数 第三个参数是一个对象里面放了 一些设置

    // watch(num2, (newval) => {
    //   console.log(newval);
    // });
    //监听 ref类型的数据 第一个参数不用写函数 直接放要监听的变量就行 第三个参数 不需要可以不写

    watchEffect(() => {
      console.log(data.num + num2.value);
    });
    // watchEffect可以认为是watch的简化版 不用指定要监听谁 只要 跟他有关的值发生变化就会触发监听函数
    return { ...toRefs(data), num2 };
  },
};
</script>

<style lang="scss"></style>
